<template>
	<uni-popup type="bottom" ref="transfer">
		<view class="transfer">
			<div class="header">
				<img @click="close" src="../static/close.svg" class="close-icon" alt="" srcset="">
				<text class="header-title">转账</text>
			</div>
			<div class="transfer-info">
				<div class="user-box">
					<img :src="from.avatar" class="avatar-wrapper" alt="" srcset="">
					<text class="username">{{from.nickname}}</text>
				</div>
				<div class="transfer-box">
					<text class="transfer-text">转给</text>
					<img src="../static/transfer_icon.svg" class="transfer-icon" alt="" srcset="">
				</div>
				<div class="user-box">
					<img :src="to.avatar" class="avatar-wrapper" alt="" srcset="">
					<text class="username">{{to.nickname}}</text>
				</div>
			</div>
			<div type="text" class="popup-input">
				<text class="input" :class="{'empty':transferAmount==='|' }">{{transferAmount}}</text>
				<!-- <text class="input">{{transferAmount}}</text> -->
			</div>
			<div class="keyboard">
				<div class="grid grid1" @click="onClickKey(1)">1</div>
				<div class="grid grid2" @click="onClickKey(2)">2</div>
				<div class="grid grid3" @click="onClickKey(3)">3</div>
				<div class="grid grid4" @click="onClickKey(4)">4</div>
				<div class="grid grid5" @click="onClickKey(5)">5</div>
				<div class="grid grid6" @click="onClickKey(6)">6</div>
				<div class="grid grid7" @click="onClickKey(7)">7</div>
				<div class="grid grid8" @click="onClickKey(8)">8</div>
				<div class="grid grid9" @click="onClickKey(9)">9</div>
				<div class="grid grid10" @click="onClickKey(0)">0</div>
				<div class="grid grid12 icon-delete" @click="onDelete()">
				</div>
				<div class="grid grid13" @click="cofirmThrottle">确认</div>
			</div>
		</view>
	</uni-popup>
</template>

<script>
	import {
		roomTransfer
	} from '../api/room'
	import {
		throttle
	} from '../utils/ruoyi.js'
	export default {
		name: "TransferPopup",
		data() {
			return {
				transferAmount: "|",
				transferMaxAmount: 999999,
				transferMaxAmountLength: 6,
				confirmEnabel: true,
				cofirmThrottle: undefined
			};
		},
		props: {
			from: Object,
			to: Object
		},
		created() {
			var that = this
			this.cofirmThrottle = throttle(() => {
				that.onConfirm()
			})
		},
		methods: {
			close() {
				this.$refs.transfer.close()
			},
			open() {
				this.$refs.transfer.open()
				this.transferAmount = '|'
				this.confirmEnabel = true
			},
			onDelete() {
				var temp = this.transferAmount.substring(0, this.transferAmount.length - 1)
				this.transferAmount = 0 === temp.length ? "|" : temp

			},
			onClickKey(value) {
				if (this.transferAmount === '|') {
					this.transferAmount = "".concat(value)

				} else if (this.transferAmount === '0') {
					this.transferAmount = "".concat(value)
				} else if (this.transferAmount.length > this.transferMaxAmountLength) {
					uni.showToast({
						title: "金额太大",
						icon: 'none'
					})
					return
				} else {
					this.transferAmount = "".concat(this.transferAmount).concat(value)
				}
			},
			onConfirm() {
				if (this.confirmEnabel) {
					this.confirmEnabel = false
					if (Number(this.transferAmount) && "|" !== this.transferAmount) {
						if (!(Number(this.transferAmount) > this.transferMaxAmount)) {
							this.transferMoney(this.transferAmount)
						} else {
							uni.showToast({
								title: "金额太大",
								icon: 'none'
							})
							this.confirmEnabel = true
						}
					} else {
						uni.showToast({
							title: "请输入金额",
							icon: 'none'
						})
						this.confirmEnabel = true
					}
				}

			},
			transferMoney(amount) {
				uni.showLoading({
					title: '转账中'
				})
				roomTransfer({
					toUserId: this.to.userId,
					score: amount
				}).then(result => {
					uni.hideLoading()
					this.$emit("finish")
					this.close()
					this.confirmEnabel = true
				}).catch(err => {
					uni.hideLoading()
					this.confirmEnabel = true
				})
			}
		}
	}
</script>

<style lang="scss">
	.transfer {
		background-color: white;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		padding-top: 24upx;

		.header {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;


			.header-title {
				font-size: 30upx;
				font-weight: bolder;
			}

			.close-icon {
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 24upx;
				top: 20upx;
			}

		}

		.transfer-info {
			// margin-left: 40upx;
			// margin-right: 40upx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			margin-top: 24upx;

			.user-box {
				align-items: center;
				display: flex;
				justify-content: center;
				flex-direction: column;

				.avatar-wrapper {
					background-color: #eee;
					border-radius: 100%;
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
					height: 100upx;
					width: 100upx;
				}

				.username {
					color: #000;
					font-weight: 600;
					padding-top: 16upx;
					text-align: center;
					width: 250upx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

			}

			.transfer-box {
				display: flex;
				flex-direction: column;
				align-items: center;


				.transfer-text {
					box-sizing: border-box;
					font-size: 48upx;
					font-weight: 700;

					padding: 0 16upx;
					text-align: center;
				}

				.transfer-icon {
					width: 80upx;
					height: 80upx;
				}

			}
		}

		.popup-input {
			background-color: $uni-color-second;
			border-radius: 16upx;
			height: 100upx;
			margin: 24upx 0;
			margin-left: 40upx;
			margin-right: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.input {
			color: #000;
			font-size: 62upx;

		}

		@keyframes twinkle {
			from {
				opacity: 0
			}

			50% {
				opacity: 1
			}

			100% {
				opacity: 0
			}



		}

		.empty {
			animation: twinkle 1s infinite;
			color: #00000070;
			font-size: 46upx
		}

		.keyboard {
			grid-column-gap: 0;
			grid-row-gap: 0;
			background-color: $uni-color-second;
			border-radius: 8upx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: repeat(4, 1fr);
			padding: 4upx;
			margin-left: 40upx;
			margin-right: 40upx;

			.grid {
				align-items: center;
				background-color: #fff;
				border-radius: 12upx;
				display: flex;
				font-size: 36upx;
				font-weight: 700;
				justify-content: center;
				margin: 10upx;
				padding: 26upx;
			}

			.grid::hover {
				background-color: #f3f3f3
			}

			.grid1 {
				grid-area: 1/1/2/2
			}

			.grid2 {
				grid-area: 1/2/2/3
			}

			.grid3 {
				grid-area: 1/3/2/4
			}

			.grid4 {
				grid-area: 2/1/3/2
			}

			.grid5 {
				grid-area: 2/2/3/3
			}

			.grid6 {
				grid-area: 2/3/3/4
			}

			.grid7 {
				grid-area: 3/1/4/2
			}

			.grid8 {
				grid-area: 3/2/4/3
			}

			.grid9 {
				grid-area: 3/3/4/4
			}

			.grid10 {
				grid-area: 4/1/5/4
			}

			.grid12 {
				grid-area: 1/4/2/5;
				display: flex;
				align-items: center;
				justify-content: center;

				.delete-icon {
					width: 80upx;
					height: 80upx;
				}
			}

			.icon-delete {
				background-image: url();
				background-position: 50%;
				background-repeat: no-repeat
			}

			.grid13 {
				background-color: $uni-color-primary;
				color: #fff;
				grid-area: 2/4/5/5
			}

			.grid13::hover {
				background-color: $uni-color-primary
			}


		}

	}
</style>